<template>
  <div>
    <div class="item-wrapper" v-for="item in tableData" :key="item.id" @click="eventHandler(item)">
      <div class="left">
        <div class="title">{{ item.title }}</div>
        <div class="desc">{{ item.desc }}</div>
        <div class="time">{{ item.createdAt }}</div>
        <el-row :gutter="10" class="category-tag-wrapper">
          <el-col :sm="12" :xs="24" v-if="item?.category">
            <div class="wrapper">
              <span class="category-tag-title">文章类别: </span>
              <RenderDict tag :value="item?.category" />
            </div>
          </el-col>
          <el-col :sm="12" :xs="24" v-if="item?.tag">
            <div class="wrapper">
            <span class="category-tag-title">文章标签: </span>
            <RenderDict tag :value="item?.tag" />
          </div>
          </el-col>
        </el-row>
      </div>
      <div class="right">
        <img class="cover-img" :src="item.picture" alt="">
      </div>
    </div>
  </div>
</template>
<script setup lang="js">
import { ref, onMounted } from "vue"
import { articleApi } from "@/api/article"
import { delayFn } from "@/utils"
import { useRouter } from "vue-router"

const router = useRouter()
const pagination = ref({
  size: 20,
  page: 1,
  total: 0,
  sizes: [10, 20, 50, 100, 200, 300, 400],
})
const loading = ref(false)
const tableData = ref([])

const init = async () => {
  if (loading.value) {
    return
  }
  loading.value = true
  try {
    const res = await articleApi(
      { },
      {
        page: pagination.value.page,
        size: pagination.value.size,
      },
    )
    const { count = 0, rows = [] } = res || {}
    pagination.value.total = count
    tableData.value = rows
  } catch (error) {}
  await delayFn()
  loading.value = false
}

const eventHandler  =(row) => {
  router.push({ path: `/${row.id}` })
}

onMounted(() => {
  init()
})
</script>
<style scoped lang="less">
  .item-wrapper {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #E6EAF0;
    padding: 16px 0;
    cursor: pointer;
    &:first-child {
      padding-top: 0;
    }
    .left {
      flex-grow: 1;
      flex: 1;
      width: 0;
      .time {
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        color: #b0b7c2;
      }
      .title {
        font-weight: 500;
        font-size: 20px;
        line-height: 28px;
        color: #000;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
        margin-bottom: 6px;
        // height: 56px;
        // overflow: hidden;
        // white-space: wrap;
        // text-overflow: ellipsis;
        // word-break: break-all;
        // display: -webkit-box;
        // -webkit-box-orient: vertical;
        // -webkit-line-clamp: 2;
        // word-break: break-all;
        cursor: pointer;
      }
      .desc {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
        font-size: 12px;
        line-height: 22px;
        color: #b0b7c2;
      }
      .category-tag-wrapper {
        // display: flex;
        // align-items: center;
        .wrapper {
          margin-right: 48px;
          display: flex;
          align-items: center;
          padding-bottom: 6px;
        }
        .category-tag-title {
          font-weight: 400;
          font-size: 12px;
          line-height: 22px;
          color: #b0b7c2;
          margin-right: 12px;
        }
      }

    }
    .right{
      display: block;
      width: 160px;
      height: 120px;
      border-radius: 8px;
      cursor: pointer;
      flex-shrink: 0;
      overflow: hidden;
      margin-left: 24px;
      .cover-img {
        width: 100%;
        height: 100%;
        vertical-align: middle;
      }
    }
  }
  /* 当屏幕宽度小于或等于768像素时，应用以下样式 */
  @media screen and (max-width: 500px) {
    .item-wrapper {
      .right {
        display: none;
      }
    }
  }
</style>
